import React from 'react';

const generateHocComponent = (Component) => {
  class HocComponent extends React.Component {
    constructor(props){
      super(props)
      this.state ={
        mouse:{
          x: 0,
          y: 0
        }
      }
    }
    getMousePosition = (e) => {
      this.setState({
        mouse:{
          x: e.clientX,
          y: e.clientY
        }
      })
    }
    render() {
      return <div style={{ height: '300px'}} onMouseMove={this.getMousePosition}>
        <Component {...this.props} mouse={this.state.mouse}></Component>
      </div>
    }
  }
  return HocComponent
}

class MouseComponent extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return <p>
      The mouse target position X: {this.props.mouse.x} y: {this.props.mouse.y}
      <br/>
      The headParam: { this.props.head } 
    </p>;
  }
}

export default generateHocComponent(MouseComponent)

